<template>
<div>
  <el-steps :active="this.active" finish-status="success" simple style="margin-top: 20px">
    <el-step title="1.填写订单" ></el-step>
    <el-step title="2.确认订单" ></el-step>
    <el-step title="3.结算" ></el-step>
  </el-steps>
  <div>
<!--    填写订单-->
    <div v-if="active==0" class="OrderTable">
      <div>
        <el-table
            :data="line"
            style="width: 100%" >
          <el-table-column prop="lineID" label="线路编号" width="250" align="center"></el-table-column>
          <el-table-column prop="lineName" label="线路名称" width="250" align="center"></el-table-column>
          <!--        <el-table-column prop="date" label="线路类型" width="180"></el-table-column>-->
          <el-table-column prop="price" label="单价" width="250" align="center"></el-table-column>
          <el-table-column prop="vehicle" label="出游工具" width="250" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="userTab">
        <h4 style="text-align: left;margin: 20px 0">填写购票用户信息</h4>
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="购买票数">
            <el-select v-model="num1" placeholder="请选择">
              <el-option v-for="item in num" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="user.tel"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="user.identityID"></el-input>
          </el-form-item>
        </el-form>
        <div >
          <span style="color: red;font-weight: 700;font-size: 20px">所需支付金额：￥{{num1 * line1.price}}</span>
          <el-button type="success" plain  @click="next">下一步</el-button>
          <el-button type="success" plain  @click="$router.push('/shopPage')">取消订单</el-button>
        </div>
      </div>
    </div>
<!--   确认订单 -->
    <div v-if="active==1" class="OrderTable">
      <div>
        <el-table
            :data="line"
            style="width: 100%" >
          <el-table-column prop="lineID" label="线路编号" width="250" align="center"></el-table-column>
          <el-table-column prop="lineName" label="线路名称" width="250" align="center"></el-table-column>
          <!--        <el-table-column prop="date" label="线路类型" width="180"></el-table-column>-->
          <el-table-column prop="price" label="单价" width="250" align="center"></el-table-column>
          <el-table-column prop="vehicle" label="出游工具" width="250" align="center"></el-table-column>
        </el-table>
      </div>
      <div  class="userTab">
        <h4 style="text-align: left;margin: 20px 0">确认购票用户信息</h4>
        <el-form ref="form" :model="user" label-width="90px">
          <el-form-item label="购买票数：">
            {{user.num}}
          </el-form-item>
          <el-form-item label="真实姓名：">
            {{user.name}}
          </el-form-item>
          <el-form-item label="手机号码：">
           {{user.tel}}
          </el-form-item>
          <el-form-item label="身份证号：">
           {{user.identityID}}
          </el-form-item>
        </el-form>
        <div>
          <span style="color: red;font-weight: 700;font-size: 20px">所需支付金额：￥{{user.num * line1.price}}</span>
          <el-button type="success" plain  @click="next1">确认订单</el-button>
          <el-button type="success" plain  @click="next2">上一步</el-button>
        </div>
      </div>
    </div>
<!--    结算-->
    <div v-if="active==2" class="OrderTable">
      <div>
        <el-table
            :data="line"
            style="width: 100%" >
          <el-table-column prop="lineID" label="线路编号" width="250" align="center"></el-table-column>
          <el-table-column prop="lineName" label="线路名称" width="250" align="center"></el-table-column>
          <!--        <el-table-column prop="date" label="线路类型" width="180"></el-table-column>-->
          <el-table-column prop="price" label="单价" width="250" align="center"></el-table-column>
          <el-table-column prop="vehicle" label="出游工具" width="250" align="center"></el-table-column>
        </el-table>
      </div>
      <div  class="userTab">
        <h4 style="text-align: left;margin: 20px 0">购票用户信息</h4>
        <el-form ref="form" :model="user" label-width="90px">
          <el-form-item label="购买票数：">
            {{user.num}}
          </el-form-item>
          <el-form-item label="真实姓名：">
            {{user.name}}
          </el-form-item>
          <el-form-item label="手机号码：">
            {{user.tel}}
          </el-form-item>
          <el-form-item label="身份证号：">
            {{user.identityID}}
          </el-form-item>
        </el-form>
        <div>
          <span style="color: red;font-weight: 700;font-size: 20px">所需支付金额：￥{{user.num * line1.price}}</span>
          <el-button type="success" plain  @click="next3">结算</el-button>
          <el-button type="success" plain  @click="next2">上一步</el-button>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: "addOrder",
  data(){
    return{
      active:0,
      line:[this.$route.query.info],
      line1:this.$route.query.info,
      user:{},
      num:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
      num1:0,
    }
  },
  created() {
    this.user.lineID=this.line1.lineID
    this.user.customerID=this.line1.customerID
    this.user.count=this.line1.price
    console.log(this.line)
    console.log(this.line1)
  },
  methods:{
    next:function (){
      this.user.num =this.num1
      this.active++
    },
    next1:function (){
      this.active++
    },
    next2:function (){
      this.active--
    },
    next3:function (){
      this.active++;
      this.$axios.post("/api/customer/order",this.user).then(res =>{
        console.log(res)
      })
      this.delCat(this.line1)
      this.$alert('支付成功');
      this.$router.push('/shopPage')
    },
    delCat:function (val){
      this.$axios.delete("/api/customer/cat/"+ val.carID).then(res =>{
        this.$message.warning(res.data.msg);
        location.reload();
      })
    },

  },

}
</script>

<style>
.el-table th.is-leaf{
  background-color: azure;
  margin-right: 2px;
}
.OrderTable{
  width: 1000px;

  border: 1px solid #8fd26a;
  margin: 20px auto;
  padding: 10px;

}
.userTab{
  border-bottom: 1px #c0ccda dashed;
  border-top: 1px #c0ccda dashed;
  padding: 20px 20px 40px;
  margin-top: 20px;
  text-align: left;
}
.el-input{
  width: 300px;
  height: 50px;
  text-align: left;
}

</style>
<style scoped>
.el-button{
  float: right;
  width: 150px;
  margin: 0 10px ;

}
</style>